<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04 选项卡</title>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .table{
            margin: 50px auto;
            width: 400px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .table .menu{
            width: 400px;
        }
        .table .menu .item{
            width: 100px;
            color: blue;
        }
        .table .menu .checked{
            width: 100px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="table">
            <div class="menu">
                <div class="item" :class="{checked : activeid == item.id}" v-for="item in list" @click="change(item.id)">{{item.msg}}
                    <p v-for="info in item.list" v-show="activeid == item.id">{{info.msg}}</p>

                </div>
            </div>
        </div>
    </div>
</body>
<script>

    new Vue({
        el:"#app",
        data:{
            activeid:1,
            list:[{id:1,msg:"菜单一",list:[{id:11,msg:"菜单1-1"},{id:12,msg:"菜单1-2"}]},{id:2,msg:"菜单二",list:[{id:21,msg:"菜单2-1"},{id:22,msg:"菜单2-2"}]},{id:3,msg:"菜单三",list:[{id:31,msg:"菜单3-1"},{id:32,msg:"菜单3-2"}]},{id:4,msg:"菜单四",list:[{id:41,msg:"菜单4-1"},{id:42,msg:"菜单4-2"}]}]

        },
        methods:{
            change(id){
                if(this.activeid == id){
                    this.activeid = "";
                }else{
                    this.activeid = id;
                }
            }
        }
    })
</script>
</html>